<template>
  <div class="video-list-page">
    <!-- 平台选择 -->
    <div class="platform-selector-wrapper">
      <transition name="platform-selector">
        <el-radio-group v-model="platform" class="platform-selector">
          <el-radio-button label="kuaishou">快手</el-radio-button>
          <el-radio-button label="douyin">抖音</el-radio-button>
          <el-radio-button label="xiaohongshu">小红书</el-radio-button>
          <el-radio-button label="weibo">微博</el-radio-button>
          <el-radio-button label="baijiahao">百家号</el-radio-button>
          <el-radio-button label="toutiao">头条</el-radio-button>
        </el-radio-group>
      </transition>
    </div>

    <!-- 在视频列表外层添加 -->
    <!-- 修改骨架屏部分 -->
    <el-skeleton :loading="loading" animated class="video-skeleton">
      <template #template>
        <el-row :gutter="20">
          <!-- 使用v-for循环创建4个骨架项 -->
          <el-col v-for="i in 4" :key="i" :xs="24" :sm="12" :md="8" :lg="6">
            <div class="skeleton-item">
              <!-- 视频封面骨架 -->
              <div class="skeleton-cover">
                <el-skeleton-item variant="image" />
                <!-- 模拟时长显示 -->
                <div class="skeleton-duration">
                  <el-skeleton-item variant="text" style="width: 40px" />
                </div>
              </div>

              <!-- 视频信息骨架 -->
              <div class="skeleton-info">
                <!-- 标题骨架 -->
                <el-skeleton-item
                  variant="h3"
                  style="width: 90%; height: 20px"
                />
                <el-skeleton-item
                  variant="h3"
                  style="width: 60%; height: 20px; margin-top: 8px"
                />

                <!-- 作者信息骨架 -->
                <div class="skeleton-author">
                  <el-skeleton-item
                    variant="circle"
                    style="width: 32px; height: 32px"
                  />
                  <el-skeleton-item
                    variant="text"
                    style="margin-left: 8px; width: 50%"
                  />
                </div>

                <!-- 统计信息骨架 -->
                <div class="skeleton-stats">
                  <el-skeleton-item variant="text" style="width: 25%" />
                  <el-skeleton-item variant="text" style="width: 25%" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>

      <!-- 原有的视频列表作为默认插槽内容 -->
      <template #default>
        <!-- 视频列表展示 -->
        <el-row :gutter="20">
          <el-col
            v-for="video in videoList"
            :key="video.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <el-card
              class="video-card"
              shadow="hover"
              @click="handleVideoClick(video)"
            >
              <!-- 添加操作按钮层 -->
              <div class="card-actions">
                <el-button-group>
                  <el-button
                    type="danger"
                    :icon="Delete"
                    style="position: absolute; bottom: 10px; right: 10px"
                    @click.stop="handleDelete(video)"
                  >
                    删除
                  </el-button>
                </el-button-group>
              </div>
              <div class="video-cover">
                <el-image :src="video.cover" fit="cover" loading="lazy">
                  <template #placeholder>
                    <div class="image-placeholder">
                      <el-icon>
                        <Picture />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
                <span class="duration">{{ video.duration }}</span>
                <div class="play-icon">
                  <el-icon>
                    <VideoPlay />
                  </el-icon>
                </div>
              </div>

              <div class="video-info">
                <h3 class="title">{{ video.title }}</h3>
                <div class="author">
                  <el-avatar :size="24" :src="video.author?.avatar" />
                  <span class="name">{{ video.author?.name }}</span>
                </div>
                <div class="stats">
                  <span class="views">
                    <el-icon>
                      <View />
                    </el-icon>
                    {{ video.stats?.views }}
                  </span>
                  <span class="likes">
                    <el-icon>
                      <Star />
                    </el-icon>
                    {{ video.stats?.likes }}
                  </span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </el-skeleton>
    <!-- 视频播放弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentVideo?.title"
      class="video-dialog"
      width="60%"
      destroy-on-close
      @closed="handleDialogClose"
    >
      <div class="video-player-container">
        <div v-if="loading" class="loading-overlay">
          <el-icon class="is-loading">
            <Loading />
          </el-icon>
        </div>

        <!-- 快手视频 -->
        <video
          v-if="platform === 'kuaishou' && currentVideo"
          controls
          class="video-element"
        >
          <source :src="currentVideo?.videoUrl" />
          您的浏览器不支持 video 标签。
        </video>
        <!-- 修改抖音播放器部分 -->
        <div class="video-player-container">
          <div v-if="loading" class="loading-overlay">
            <el-icon class="is-loading">
              <Loading />
            </el-icon>
          </div>
          <!-- 修改视频播放器部分 -->
          <iframe
            v-if="currentVideo"
            :src="currentVideoUrl"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
            class="video-iframe"
            @load="handleVideoLoad"
            @error="handleVideoError"
            sandbox="allow-scripts allow-same-origin allow-presentation"
          ></iframe>
        </div>

        <iframe
          v-if="platform === 'xiaohongshu' && currentVideo"
          :src="getXiaohongshuUrl(currentVideo)"
          class="video-iframe"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
          @load="handleVideoLoad"
          @error="handleVideoError"
        ></iframe>

        <!-- 微博播放器 -->
        <iframe
          v-if="platform === 'weibo' && currentVideo"
          :src="getWeiboUrl(currentVideo)"
          class="video-iframe"
          frameborder="0"
          allowfullscreen
          @load="handleVideoLoad"
          @error="handleVideoError"
        ></iframe>

        <!-- 头条播放器 -->
        <iframe
          v-if="platform === 'toutiao' && currentVideo"
          :src="getToutiaoUrl(currentVideo)"
          class="video-iframe toutiao-player"
          frameborder="0"
          allowfullscreen
          @load="handleVideoLoad"
          @error="handleVideoError"
        ></iframe>
      </div>

      <div class="video-detail" v-if="currentVideo">
        <div class="author-info">
          <el-avatar :size="40" :src="currentVideo.author?.avatar" />
          <div class="author-detail">
            <span class="name">{{ currentVideo.author?.name }}</span>
            <span class="time">{{ currentVideo.publishTime }}</span>
          </div>
          <el-button
            type="primary"
            size="small"
            class="follow-btn"
            :icon="Plus"
            @click="handleFollow"
          >
            关注
          </el-button>
        </div>

        <!-- <div class="video-stats">
          <div class="stat-item">
            <el-icon>
              <View />
            </el-icon>
            <span>{{ currentVideo.stats?.views }}</span>
          </div>
          <div class="stat-item">
            <el-icon>
              <Star />
            </el-icon>
            <span>{{ currentVideo.stats?.likes }}</span>
          </div>
        </div> -->
        <!-- 视频统计信息 -->
        <div class="video-stats">
          <div class="stat-item">
            <el-icon><View /></el-icon>
            <span>{{ formatNumber(currentVideo.stats?.views) }}播放</span>
          </div>
          <div class="stat-item">
            <el-icon><Star /></el-icon>
            <span>{{ formatNumber(currentVideo.stats?.likes) }}点赞</span>
          </div>
          <div class="stat-item">
            <el-icon><ChatDotRound /></el-icon>
            <span>{{ formatNumber(currentVideo.stats?.comments) }}评论</span>
          </div>
          <div class="stat-item">
            <el-icon><Share /></el-icon>
            <span>{{ formatNumber(currentVideo.stats?.shares) }}分享</span>
          </div>
        </div>

        <!-- 视频标签 -->
        <div class="video-tags" v-if="currentVideo.tags?.length">
          <el-tag
            v-for="tag in currentVideo.tags"
            :key="tag"
            size="small"
            class="tag-item"
          >
            # {{ tag }}
          </el-tag>
        </div>

        <!-- 视频描述 -->
        <div class="description">
          {{ currentVideo.description }}
        </div>

        <!-- 音乐信息 -->
        <div class="music-info" v-if="currentVideo.music">
          <el-icon><Headset /></el-icon>
          <span class="music-name">{{ currentVideo.music.name }}</span>
          <span class="music-author">- {{ currentVideo.music.author }}</span>
        </div>

        <!-- 位置信息 -->
        <div class="location" v-if="currentVideo.location">
          <el-icon><Location /></el-icon>
          <span>{{ currentVideo.location }}</span>
        </div>

        <div class="description">{{ currentVideo.description }}</div>
        <div class="dialog-actions">
          <el-button type="danger" class="close-btn" @click="close">
            <el-icon>
              <Close />
            </el-icon>
            关闭
          </el-button>
          <el-button
            type="primary"
            @click="handleDownload"
            :loading="downloading"
          >
            <el-icon>
              <Download />
            </el-icon>
            下载视频
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '../../../utils/request'
import { mockKuaishouData } from '../../../components/user/kuaishouData'
import { mockDouyinData } from '../../../components/user/douyinData'
import { VideoPlay } from '@element-plus/icons-vue'
import { mockXiaohongshuData } from '../../../components/user/xiaohongshuData'
import { mockWeiboData } from '../../../components/user/weiboData' // 新增微博数据导入
import { mockToutiaoData } from '../../../components/user/toutiaoData'
import {
  View,
  Star,
  ChatDotRound,
  Share,
  Headset,
  Location,
  Plus,
} from '@element-plus/icons-vue'
const router = useRouter()
const platform = ref('kuaishou')
const videoList = ref([])
const currentVideo = ref(null)
const dialogVisible = ref(false)
const loading = ref(true)
// 修改loading状态控制
const loadingTimer = ref(null)

// 添加播放器相关的响应式数据
// 快手
const videoPlayer = ref(null)
const playerOptions = ref({
  autoplay: true,
  controls: true,
  sources: [
    {
      type: 'video/mp4',
      src: '',
    },
  ],
})

// 获取播放链接
// const getBilibiliUrl = (video) => {
//   return `//player.bilibili.com/player.html?aid=${video.aid}&bvid=${video.id}&cid=${video.cid}&page=1`
// }

// 抖音数组
const douyinData = ref([])
// // 修改getDouyinUrl函数
const getDouyinUrl = (video) => {
  // 使用抖音官方提供的嵌入播放器域名
  return mockDouyinData.getVideoUrl(video)
}
const currentVideoUrl = computed(() => {
  if (!currentVideo.value) return ''
  return currentVideo.value.videoUrl // 直接使用视频URL
})
// 快手
// const getKuaishouUrl = (video) => {
//   return mockKuaishouData.getVideoUrl(video)
// }

const getKuaishouUrl = (video) => {
  return mockKuaishouData.getVideoUrl(video)
}
// 添加关注方法
const handleFollow = () => {
  ElMessage.success('关注成功')
}

// 修改视频数据映射
const mapVideoData = (item) => ({
  id: item.aweme_id,
  title: item.video_desc,
  cover: item.cover_url,
  duration: formatDuration(item.duration),
  author: {
    avatar: item.author_avatar_url,
    name: item.author_nickname,
  },
  stats: {
    views: item.play_count,
    likes: item.digg_count,
    comments: item.comment_count,
    shares: item.share_count,
  },
  videoUrl: item.video_url,
  publishTime: item.create_time,
  description: item.video_desc,
  tags: item.hashtag_list?.map((tag) => tag.hashtag_name) || [],
  music: item.music_info
    ? {
        name: item.music_info.title,
        author: item.music_info.author,
      }
    : null,
  location: item.poi_info?.poi_name,
})
// 添加获取小红书播放链接的方法
const getXiaohongshuUrl = (video) => {
  // 使用小红书的嵌入式播放器URL
  return mockXiaohongshuData.getVideoUrl(video)
}
// 添加获取微博视频URL的方法
const getWeiboUrl = (video) => {
  return mockWeiboData.getVideoUrl(video)
}

// 添加获取头条视频URL的方法
const getToutiaoUrl = (video) => {
  return mockToutiaoData.getVideoUrl(video)
}
// 监听平台变化
watch(platform, () => {
  loadVideoList()
  handleDialogClose()
})
// 添加格式化函数
const formatDuration = (duration) => {
  // 将毫秒转换为秒
  const seconds = Math.floor(duration / 1000)
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  }
  return num.toString()
}

const formatTime = (timestamp) => {
  return new Date(timestamp * 1000).toLocaleDateString()
}

// 修改获取抖音数据的方法
const getDouyinData = async () => {
  try {
    const response = await request.get('/douyin/videos')
    douyinData.value = response.data.list
    console.log(douyinData.value, 'douyinData.value')
  } catch (error) {
    console.error('获取抖音视频失败:', error)
    ElMessage.error('获取抖音视频失败')
  }
}

// 加载视频列表
const loadVideoList = async () => {
  try {
    loading.value = true
    // 设置最短loading时间为1.5秒
    loadingTimer.value = setTimeout(() => {
      loading.value = false
    },2500)
    switch (platform.value) {
      case 'kuaishou':
        const { list: ksList } = await mockKuaishouData.getVideoList()
        videoList.value = ksList
        break
      // case 'kuaishou':
      //   // const { list: ksList } = await mockKuaishouData.getVideoList()
      //   // videoList.value = ksList

      //   break
      case 'douyin':
        await getDouyinData()
        videoList.value = douyinData.value.map(mapVideoData)
        break
      case 'xiaohongshu':
        const { list: xhsList } = await mockXiaohongshuData.getVideoList()
        videoList.value = xhsList
        break
      case 'weibo':
        const { list: wbList } = await mockWeiboData.getVideoList()
        videoList.value = wbList
        break
      case 'toutiao':
        const { list: ttList } = await mockToutiaoData.getVideoList()
        videoList.value = ttList
        break
    }
  } catch (error) {
    console.error('加载视频列表失败:', error)
    ElMessage.error('加载视频列表失败')
  } finally {
    loading.value = false
  }
}

// 处理视频点击
const handleVideoClick = async (video) => {
  try {
    loading.value = true
    currentVideo.value = video
    dialogVisible.value = true

    if (platform.value === 'kuaishou') {
      // 更新播放器源
      playerOptions.value.sources[0].src = video.videoUrl
    }

    router.push({
      query: {
        videoId: video.id,
        platform: platform.value,
      },
    })
  } catch (error) {
    ElMessage.error('视频加载失败')
  }
}

const handleVideoLoad = () => {
  loading.value = false
}

const handleVideoError = () => {
  loading.value = false
  ElMessage.error('视频加载失败，请稍后重试')
}
// 添加小红书播放器初始化方法
const initXiaohongshuPlayer = () => {
  const iframe = document.querySelector('.video-iframe')
  if (iframe && platform.value === 'xiaohongshu') {
    // 向iframe发送初始化消息
    iframe.contentWindow.postMessage(
      {
        type: 'xhs-player-init',
        videoId: currentVideo.value.id,
      },
      '*',
    )
  }
}

const handleDialogClose = () => {
  currentVideo.value = null
  loading.value = true
  router.push({ query: {} })
}

const downloading = ref(false)
const close = () => {
  dialogVisible.value = false
}

const handleDownload = async () => {
  if (!currentVideo.value) return
  downloading.value = true
  // 这里添加实际的下载逻辑，例如：
  // await downloadVideo(currentVideo.value.id)
  ElMessage.success('下载成功')
}

watch(platform, () => {
  loadVideoList()
  handleDialogClose()
})

onMounted(() => {
  getDouyinData()
  loadVideoList()
})

const initDouyinPlayer = () => {
  if (platform.value === 'douyin' && currentVideo.value) {
    const container = document.getElementById('douyin-player-container')
    if (container) {
      container.innerHTML = ''

      // 创建抖音播放器脚本
      const script = document.createElement('script')
      // 使用正确的抖音播放器SDK URL
      script.src =
        'https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_8926.f87f89c4.js'
      script.async = true
      script.onload = () => {
        // 确保DouyinPlayer对象存在
        if (window.DouyinPlayer) {
          window.DouyinPlayer({
            container: container,
            vid: currentVideo.value.id,
            autoplay: true,
            width: '100%',
            height: '100%',
          })
        }
        handleVideoLoad()
      }
      script.onerror = handleVideoError
      document.body.appendChild(script)
    }
  }
}

// 监听当前视频变化
watch(currentVideo, (newVal) => {
  if (newVal && platform.value === 'douyin') {
    nextTick(() => {
      initDouyinPlayer()
    })
  }
})
// 组件卸载时清理定时器
onBeforeUnmount(() => {
  if (loadingTimer.value) {
    clearTimeout(loadingTimer.value)
  }
})
</script>

<style lang="scss" scoped>
.video-list-page {
  padding: 20px;

  .video-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);

      .play-icon {
        opacity: 1;
      }
    }

    .video-cover {
      position: relative;
      aspect-ratio: 16/9;
      overflow: hidden;
      border-radius: 8px;

      .el-image {
        width: 100%;
        height: 100%;
      }

      .duration {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
      }

      .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 48px;
        color: #fff;
        opacity: 0;
        transition: opacity 0.3s;
      }
    }

    .video-info {
      padding: 12px;

      .title {
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 1.4;
        height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .author {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        .name {
          font-size: 13px;
          color: #606266;
        }
      }

      .stats {
        display: flex;
        gap: 16px;
        color: #909399;
        font-size: 13px;

        span {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }

  .dialog-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: center;
    gap: 16px;

    .el-button {
      min-width: 120px;

      .el-icon {
        margin-right: 4px;
      }
    }
  }

  .video-player-container {
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;

    .douyin-player {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .douyin-embed {
        width: 100%;
        height: 100%;
        display: block;
        color: #fff;
        text-decoration: none;
        text-align: center;
        line-height: 2;
      }
    }

    .video-iframe {
      width: 100%;
      height: 100%;
      border: none;
      position: absolute; // 添加绝对定位
      top: 0;
      left: 0;
    }

    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.6);
      z-index: 1;

      .el-icon {
        font-size: 32px;
        color: #fff;
      }
    }
  }

  .video-detail {
    margin-top: 20px;
    padding: 0 20px;

    .author-info {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;

      .author-detail {
        display: flex;
        flex-direction: column;

        .name {
          font-weight: bold;
        }

        .time {
          font-size: 12px;
          color: #909399;
        }
      }
    }

    .video-stats {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #606266;
      }
    }

    .video-tags {
      margin-bottom: 16px;
    }

    .description {
      color: #606266;
      line-height: 1.6;
    }
  }
}
.platform-selector {
  margin-bottom: 24px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

  :deep(.el-radio-button__inner) {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;

    // 为每个平台添加图标
    &::before {
      font-family: 'element-icons';
      font-size: 18px;
    }

    // 快手样式
    .el-radio-button__orig-radio:checked + &[value='kuaishou'] {
      background: linear-gradient(135deg, #ff4e00, #ff8a00);
      box-shadow: 0 4px 15px rgba(255, 78, 0, 0.3);
      &::before {
        content: '快';
        color: #fff;
      }
    }

    // 抖音样式
    .el-radio-button__orig-radio:checked + &[value='douyin'] {
      background: linear-gradient(135deg, #fe2c55, #ff3b5c);
      box-shadow: 0 4px 15px rgba(254, 44, 85, 0.3);
      &::before {
        content: '抖';
        color: #fff;
      }
    }

    // 小红书样式
    .el-radio-button__orig-radio:checked + &[value='xiaohongshu'] {
      background: linear-gradient(135deg, #ff2442, #ff4d6d);
      box-shadow: 0 4px 15px rgba(255, 36, 66, 0.3);
      &::before {
        content: '书';
        color: #fff;
      }
    }

    // 微博样式
    .el-radio-button__orig-radio:checked + &[value='weibo'] {
      background: linear-gradient(135deg, #ff8200, #ffa041);
      box-shadow: 0 4px 15px rgba(255, 130, 0, 0.3);
      &::before {
        content: '微';
        color: #fff;
      }
    }

    // 百家号样式
    .el-radio-button__orig-radio:checked + &[value='baijiahao'] {
      background: linear-gradient(135deg, #2932e1, #4285f4);
      box-shadow: 0 4px 15px rgba(41, 50, 225, 0.3);
      &::before {
        content: '百';
        color: #fff;
      }
    }

    // 头条样式
    .el-radio-button__orig-radio:checked + &[value='toutiao'] {
      background: linear-gradient(135deg, #d43d3d, #ff4e4e);
      box-shadow: 0 4px 15px rgba(212, 61, 61, 0.3);
      &::before {
        content: '头';
        color: #fff;
      }
    }

    // 未选中状态
    &:not(:checked) {
      background: #f5f7fa;
      color: #606266;

      &:hover {
        background: #e6e8eb;
        transform: translateY(-2px);
      }
    }
  }

  // 响应式布局
  @media screen and (max-width: 768px) {
    flex-wrap: wrap;
    padding: 12px;

    :deep(.el-radio-button__inner) {
      padding: 8px 16px;
      font-size: 13px;

      &::before {
        font-size: 16px;
      }
    }
  }
}

// 添加切换动画
.platform-selector-enter-active,
.platform-selector-leave-active {
  transition: all 0.3s ease;
}

.platform-selector-enter-from,
.platform-selector-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;

  .el-icon {
    font-size: 32px;
    color: #fff;
  }
}
.video-player {
  width: 100%;
  height: 100%;

  :deep(.video-js) {
    width: 100%;
    height: 100%;
  }
}

.video-dialog {
  :deep(.el-dialog) {
    max-width: 1200px; // 设置最大宽度
    margin: 20px auto;

    @media screen and (max-width: 768px) {
      width: 95% !important; // 移动端适配
      margin: 10px auto;
    }
  }

  :deep(.el-dialog__body) {
    padding: 0; // 移除内边距以获得更大的视频空间
  }
}

.video-player-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; // 16:9 比例
  background: #000;
  border-radius: 8px;
  overflow: hidden;

  // 视频元素
  .video-element,
  .video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  // 加载遮罩
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
  }
}

// 视频详情部分自适应
.video-detail {
  padding: 20px;
  max-width: 100%;

  @media screen and (max-width: 768px) {
    padding: 10px;

    .author-info {
      flex-direction: column;
      align-items: flex-start;
    }

    .video-stats {
      flex-wrap: wrap;
    }

    .dialog-actions {
      flex-direction: column;

      .el-button {
        width: 100%;
        margin-bottom: 10px;
      }
    }
  }
}
.video-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
  position: relative; // 添加相对定位
  overflow: hidden; // 防止按钮溢出

  // 操作按钮层样式
  .card-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;

    .el-button-group {
      .el-button {
        margin: 20px 4px;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }

  &:hover {
    transform: translateY(-5px);

    .card-actions {
      opacity: 1;
    }

    .play-icon {
      opacity: 1;
    }
  }
}
.video-card {
  // ... 原有样式保持不变 ...

  // 添加卡片阴影和过渡效果
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);

    .card-actions {
      opacity: 1;
    }

    .video-cover::after {
      opacity: 1;
    }
  }

  .video-cover {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 10px;
      background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.5)
      );
      opacity: 0;
      transition: opacity 0.3s;
    }
  }

  // 添加视频时长和质量标签
  .video-badges {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 1;

    .quality-badge {
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
}
.toolbar {
  margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;

  .search-input {
    width: 300px;
  }

  .sort-select {
    width: 120px;
  }
}

.video-skeleton {
  .skeleton-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .skeleton-cover {
      position: relative;
      aspect-ratio: 16/9;
      
      .el-skeleton-item {
        width: 100%;
        height: 100%;
      }
      
      .skeleton-duration {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 2px 6px;
      }
    }
    
    .skeleton-info {
      padding: 16px;
      
      .skeleton-author {
        display: flex;
        align-items: center;
        margin: 12px 0;
      }
      
      .skeleton-stats {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
      }
    }
  }
}

// 确保播放器控件在视频上方
.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
.error-icon,
.empty-icon {
  font-size: 48px;
  color: #909399;
}

// 添加响应式布局支持
@media screen and (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    .search-input,
    .sort-select {
      width: 100%;
    }
  }

  .video-card {
    margin-bottom: 16px;
  }
}
.video-detail {
  padding: 20px;

  .author-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .author-detail {
      flex: 1;
      margin-left: 12px;

      .name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }

      .time {
        font-size: 12px;
        color: #909399;
      }
    }

    .follow-btn {
      padding: 6px 16px;
    }
  }

  .video-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f7f8fa;
    border-radius: 8px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #606266;

      .el-icon {
        font-size: 18px;
      }
    }
  }

  .video-tags {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .tag-item {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
      }
    }
  }

  .description {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #303133;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .music-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: #f7f8fa;
    border-radius: 8px;

    .el-icon {
      font-size: 20px;
      color: #409eff;
    }

    .music-name {
      font-weight: 500;
    }

    .music-author {
      color: #909399;
    }
  }

  .location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #909399;
    font-size: 13px;

    .el-icon {
      font-size: 16px;
    }
  }
}
}
</style>
